<template>
  <view class="expressMailArea">
    <view class="expressType">
      <uv-radio-group
        :value="radiovalue"
        :customStyle="customStyleGroup"
        @change="changeRadioValue"
      >
        <uv-radio
          v-for="(item, index) in radiolist"
          :key="index"
          :label="item.name"
          :name="item.type"
          activeColor="rgba(54, 161, 238, 1)"
          :customStyle="customStyleItem"
          size="24rpx"
          labelSize="24rpx"
        >
        </uv-radio>
      </uv-radio-group>
    </view>
    <view class="postage">
      包邮&nbsp;<uv-switch
        :value="switchValue"
        size="34rpx"
        activeColor="#36A1EE"
        inactiveColor="#DCDCDC"
        @change="changeSwitchValue"
      ></uv-switch>
    </view>
  </view>
</template>

<script setup>
import { ref, toRef, watch, inject, computed } from "vue";

import { expressMailType as radiolist } from "/utils/enums/index.js";

const props = defineProps({
  deliveryMethod: {
    type: Number,
    default: 1,
  },
  isDeliveryCovered: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:deliveryMethod", "update:isDeliveryCovered"]);

const radiovalue = toRef(props, "deliveryMethod");
const changeRadioValue = (val) => {
  emit("update:deliveryMethod", val);
};

const switchValue = toRef(props, "isDeliveryCovered");
const changeSwitchValue = (val) => {
  emit("update:isDeliveryCovered", val);
};

const customStyleGroup = {
  display: "flex",
  justifyContent: "space-between",
};

const customStyleItem = {
  color: "#333333",
};
</script>

<style lang="scss">
.expressMailArea {
  padding: 0 30rpx;
  border-radius: 10rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.expressType {
  width: 240rpx;
}

.postage {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #333333;
}
</style>
